<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 
		
		CSS交互动画指南之transition
		
		 https://juejin.cn/post/7009231441645174798
		 
		 
		 
		 
		 transform  
		 
		 transition
		 -->
		
		<style type="text/css">
			.btn {
			    width: 80px;
			    height: 80px;
			    border-radius: 50%;
			    border: none;
			    margin: 20px;
			    background-color: #6a5acd;
			    place-content: center;
			    color: white;
			    text-align: center;
			}
			
			.btn:hover {
				/* 向上移动 */
			    transform: translateY(-20px);
			}
			
			.transition {
			    transition: transform 1s;
			}

		</style>
	</head>
	<body>
		
		
		<div class="btn transition"></div>
		
	</body>
</html>
